'use strict';
import React from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity, ViewPropTypes, ImageBackground } from 'react-native';
import PropTypes from 'prop-types';
import ImageView from './ImageView';

class Button extends React.PureComponent {

    static propTypes = {
        ...TouchableOpacity.propTypes,
        icon: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({ uri: PropTypes.string })]),
        iconStyle: Image.propTypes.style,
        title: PropTypes.string,
        titleStyle: Text.propTypes.style,
        showLeftIcon: PropTypes.bool,
        showRightIcon: PropTypes.bool,

        backgroundImage: PropTypes.number,
        actionInterval: PropTypes.number, // 多次点击之间的延迟
    };

    static defaultProps = {
        ...TouchableOpacity.defaultProps,
        actionInterval: 500,
        showLeftIcon: false,
        showRightIcon: false,
    };

    constructor(props) {
        super(props)
        this.lastActionTime = 0
    }

    _onPress = (event) => {
        const { onPress, actionInterval } = this.props
        const nowTime = Moment().format('x')
        if ((nowTime - this.lastActionTime) <= actionInterval) {
            console.warn('间隔时间内重复点击了');
            return
        }
        this.lastActionTime = nowTime;
        onPress && onPress(event)
    }

    renderImageBackground = () => {
        const { backgroundImage } = this.props
        if (backgroundImage) {
            return (
                <ImageBackground style={styles.imageBackground} source={backgroundImage} />
            )
        }
        return null
    }

    renderTitle = () => {
        const { title, titleStyle } = this.props
        if (title) {
            return (
                <Text style={[styles.titleStyle, titleStyle]}>{title}</Text>
            )
        }
        return null
    }

    renderIcon = () => {
        const { icon, iconStyle } = this.props
        if (icon) {
            return (
                <ImageView resizeMode={'contain'} style={[styles.imageStyle, iconStyle]} source={icon} />
            )
        }
        return null
    }

    render() {
        const { style, title, titleStyle, backgroundImage, onPress, showLeftIcon, showRightIcon, ...others } = this.props
        return (
            <TouchableOpacity style={[styles.container, style]} onPress={this._onPress} {...others} >
                {this.renderImageBackground()}
                {showLeftIcon? this.renderIcon():null}
                {this.renderTitle()}
                {showRightIcon? this.renderIcon():null}
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        paddingVertical: 14,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
        backgroundColor: Theme.overallColor,
        flexDirection: 'row',
        overflow: 'hidden',
    },
    titleStyle: {
        fontSize: FontSize(15),
        color: "#fff"
    },
    imageStyle: {
        width: 25,
        height: 25,
    },
    imageBackground: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
    }
});

export default Button